<template>
  <el-tabs :tab-position="tabPosition" style="height: 1400px;">
    <!-- 动态生成标签页 -->
    <el-tab-pane v-for="type in types" :key="type" :label="type">
      <!-- 搜索栏 -->
      <div class="search-bar" style="display: flex; justify-content: center; margin-bottom: 20px;">
        <el-input 
          :placeholder="'请输入你想搜索的文化背景...'"  
          v-model="queryStr[type]"
          class="input-with-select"
          style="width: 50%; max-width: 400px;">
          <template #append>
            <el-button class="button" type="success" @click="queryInfo(type)">查询</el-button>
          </template>
        </el-input>
      </div>

      <!-- 内容展示 -->
      <el-row gutter="30">
        <el-col v-for="(background, index) in filteredList[type]" :key="index" :span="6" class="background-item">
          <el-card class="background-out" @click="goToDetailPage(background)">
            <img :src="'http://localhost:8080/images/upload/' + background.image" alt="文化背景封面" class="background-cover"/>
            <div class="background-info">
              <h4>{{ background.title }}</h4>
              <p>{{ background.type }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
  
  <!-- 分页控件 -->
  <el-pagination
    :current-page.sync="currentPage"
    :page-size="pageSize"
    :total="totalItems"
    layout="prev, pager, next"
    @current-change="handlePageChange"
  />
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,  // 当前页码
      pageSize: 12,  // 每页显示数量
      totalItems: 0,  // 总数据数量
      types: [
        '全部',
        '传统音乐',
        '新国风流行',
        '戏曲融合',
        '主题文化',
        '地域特色'
      ],
      filteredList: {},  // 存储各分类的展示数据
      backgroundList: [],  // 存储所有从后端获取的数据
      queryStr: {},  // 每种类型的搜索条件
      tabPosition: 'right'  // 标签位置
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    }
  },
  created() {
    this.fetchBackgroundData();
    this.initQueryStrAndFilteredList();
  },
  methods: {
    // 初始化查询条件和分类后的数据
    initQueryStrAndFilteredList() {
      this.types.forEach(type => {
        this.queryStr[type] = '';  // 每个分类的搜索条件
        this.filteredList[type] = [];  // 每个分类的展示数据
      });
    },

    // 获取所有文化背景数据并按分类存储
    fetchBackgroundData() {
      axios
        .get('/api/culture-background-detail/all')
        .then((response) => {
          this.backgroundList = response.data;
          this.totalItems = this.backgroundList.length;  // 更新总数据项数
          this.types.forEach(type => {
            this.filterDataByType(type);  // 初始化分页后的数据
          });
        })
        .catch((error) => {
          console.error('获取文化背景数据失败：', error);
        });
    },

    // 按类型过滤数据
    filterDataByType(type) {
      if (type === '全部') {
        this.filteredList[type] = this.backgroundList.slice(); // 复制所有数据
      } else {
        this.filteredList[type] = this.backgroundList.filter(item => item.type === type);
      }
      this.updateFilteredList(type);  // 根据当前页更新数据
    },

    // 更新分页后的数据
    updateFilteredList(type) {
      const filteredData = type === '全部' ? this.backgroundList : this.filteredList[type];
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.filteredList[type] = filteredData.slice(start, end);
    },

    // 搜索功能
    queryInfo(type) {
      if (this.queryStr[type].trim().length > 0) {
        const query = this.queryStr[type].trim();
        const matched = this.backgroundList.filter(item => item.title.includes(query));
        // 对于“全部”类型，直接使用匹配结果，否则只显示当前分类的匹配结果
        this.filteredList[type] = type === '全部' ? matched : matched.filter(item => item.type === type);
      } else {
        this.filterDataByType(type);  // 搜索框为空时恢复原数据
      }
      this.updateFilteredList(type);  // 更新分页后的显示数据
    },

    // 页码改变时的处理
    handlePageChange(page) {
      this.currentPage = page;
      this.types.forEach(type => {
        this.updateFilteredList(type);  // 根据每个类型更新分页后的数据
      });
    },

    // 跳转到文化背景详情页
    goToDetailPage(background) {
      this.$router.push({ path: '/Culture/back/' + background.culture_background_detail_id });
    }
  }
};
</script>

<style>
.background-out {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加平滑过渡效果 */
}

.background-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.background-cover {
  width: 100%;
  height: 200px; /* 固定图片的高度，确保占据卡片的上方区域 */
  object-fit: cover; /* 确保图片填充区域，不变形 */
}

.background-info {
  padding: 10px;
  flex-grow: 1; /* 让文本区域填充剩余空间 */
  text-align: center;
}

.background-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-top: 10px;
}

.background-info p {
  font-size: 14px;
  color: #777;
}

.search-bar {
  margin-bottom: 20px;
  text-align: center;
}

/* 卡片悬停效果 */
.background-out:hover {
  transform: scale(1.05); /* 轻微放大 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}
</style>
